<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.org/ui">
    <h:head>
        <title>Welcome to Future Feed</title>
        <link rel="stylesheet" type="text/css" href="../css/main.css" />
    </h:head>
    <h:body>
        <f:metadata>
            <f:event type="preRenderView" listener="#{feedsOverview.refreshUserAndFeeds}"/>
        </f:metadata>
        <p:ajaxStatus style="width:64px;height:64px;position:fixed;right:5px;bottom:5px">
            <f:facet name="start">
                <p:graphicImage value="../img/loading.gif" />
            </f:facet>
                
            <f:facet name="complete">
                <h:outputText value="" />
            </f:facet>
        </p:ajaxStatus>
        <h:form id="feedsMainForm">
            <p:toolbar>
                <p:toolbarGroup align="left">
                    <h:outputText styleClass="logo" value="Future Feed"/>
                </p:toolbarGroup>
                <p:toolbarGroup align="right" rendered="#{not empty userViewData.user}">
                    <h:outputText value="Welcome #{userViewData.user.fbName} "/>
                    <h:graphicImage value="https://graph.facebook.com/#{userViewData.user.fbId}/picture" style="width:50px;height:50px;vertical-align:middle"/> 
                    <p:separator/>
                    <p:commandButton value="Logout" icon="ui-icon-power" action="#{feedsOverview.logout}" ajax="false"/>
                </p:toolbarGroup>
            </p:toolbar>
            
            <p:messages id="messages" showDetail="true" autoUpdate="true" closable="true" redisplay="false" globalOnly="true"/><br/>
            <p:commandButton value="New feed" rendered="#{not empty userViewData.user}" icon="ui-icon-disk" oncomplete="editDlg.show();" actionListener="#{feedsOverview.newFeed}" update="editDialog" process="@this"/>
            <br/><br/>
            <p:outputPanel id="feedsTableParent">
                <p:dataTable id="feedsTable" var="feed" value="#{userViewData.feeds}" rendered="#{not empty userViewData.feeds}" 
                     paginator="true" rows="10"
                     paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
                     rowsPerPageTemplate="10,25,50"
                     paginatorPosition="bottom"
                     resizableColumns="true"
                     rowStyleClass="#{feed.status}">
                    <p:column width="200">
                        <f:facet name="header">
                            <h:outputText value="When" />
                        </f:facet>
                        <h:outputText value="#{feed.dateString} "/>
                        <h:outputText value="#{feed.timezoneAsString}"/>
                    </p:column>
                    <p:column>
                        <f:facet name="header">
                            <h:outputText value="Destination" />
                        </f:facet>
                        <h:graphicImage value="https://graph.facebook.com/#{userViewData.user.fbId}/picture" rendered="#{feed.myWall}" styleClass="picTable"/> 
                        <h:outputText value=" My Wall" rendered="#{feed.myWall}" />
                        <h:graphicImage value="#{feed.friendPhotoURL}" rendered="#{not feed.myWall}" styleClass="picTable"/> 
                        <h:outputText value=" #{feed.friendName}" rendered="#{not feed.myWall}" />
                    </p:column>
                    <p:column width="470">
                        <f:facet name="header">
                            <h:outputText value="Message" />
                        </f:facet>
                        <h:outputText value="#{feed.contentTruncated}"/>
                    </p:column>
                    <p:column styleClass="statusCol">
                        <f:facet name="header">
                            <h:outputText value="Status" />
                        </f:facet>
                        <h:outputText value="#{feed.status}"/>
                    </p:column>
                    <p:column>
                        <f:facet name="header">
                            <h:outputText value="Actions" />
                        </f:facet>
                        <p:commandLink id="editFeedForm" oncomplete="editDlg.show();" rendered="#{feed.status ne 'PUBLISHED'}" update=":feedsMainForm:editDialog" process="@this">
                            <p:graphicImage value="../img/edit.png" title="Edit feed"/>
                            <f:setPropertyActionListener value="#{feed}" target="#{userViewData.feed}"/>
                        </p:commandLink>
                        <p:spacer width="10"/>
                        <p:commandLink id="deleteFeedForm" oncomplete="deleteDlg.show();" update=":feedsMainForm:deleteDialog" process="@this">
                            <p:graphicImage value="../img/delete.png" title="Delete feed"/>
                            <f:setPropertyActionListener value="#{feed}" target="#{userViewData.feed}"/> 
                        </p:commandLink>
                    </p:column>
                </p:dataTable>
            </p:outputPanel>
            <p:dialog id="deleteDialog" header="Delete Feed" widgetVar="deleteDlg" modal="true" height="110" width="540">
                Are you sure you want to delete<br/><br/><h:outputText value="#{userViewData.feed.contentTruncated}" style="font-weight:bold"/> ?<br/><br/>
                <p:commandButton value="Yes" icon="ui-icon-disk" actionListener="#{feedsOverview.deleteFeed}" update="feedsTableParent" process="@this" oncomplete="deleteDlg.hide();"/>
                <p:commandButton value="No" icon="ui-icon-disk" onclick="deleteDlg.hide();" process="@none"/>
            </p:dialog>
            <p:dialog id="editDialog" header="#{userViewData.feed.id eq null ? 'New feed' : 'Update feed'}" widgetVar="editDlg" modal="true" height="350" width="570"> 
                <p:messages id="editDialogFeedback" showDetail="true" autoUpdate="true" closable="false" redisplay="false"/>
                <p:panelGrid>
                    <p:row>
                        <p:column><h:outputLabel for="editDialogWhen" value="When: " /></p:column>  
                        <p:column>
                            <p:calendar id="editDialogWhen" value="#{userViewData.feed.date}" pattern="yyyy-MM-dd HH:mm" stepMinute="10" readonlyInput="true"/>
                        </p:column> 
                        <p:column><h:outputLabel for="editDialogGMT" value="GMT: " /></p:column>  
                        <p:column>
                            <p:selectOneMenu id="editDialogGMT" value="#{userViewData.feed.timezone}">
                                <f:selectItem itemLabel="-12" itemValue="-12" />
                                <f:selectItem itemLabel="-11" itemValue="-11" />
                                <f:selectItem itemLabel="-10" itemValue="-10" />
                                <f:selectItem itemLabel="-9" itemValue="-9" />
                                <f:selectItem itemLabel="-8" itemValue="-8" />
                                <f:selectItem itemLabel="-7" itemValue="-7" />
                                <f:selectItem itemLabel="-6" itemValue="-6" />
                                <f:selectItem itemLabel="-5" itemValue="-5" />
                                <f:selectItem itemLabel="-4" itemValue="-4" />
                                <f:selectItem itemLabel="-3" itemValue="-3" />
                                <f:selectItem itemLabel="-2" itemValue="-2" />
                                <f:selectItem itemLabel="-1" itemValue="-1" />
                                <f:selectItem itemLabel="0" itemValue="0" />
                                <f:selectItem itemLabel="+1" itemValue="1" />
                                <f:selectItem itemLabel="+2" itemValue="2" />
                                <f:selectItem itemLabel="+3" itemValue="3" />
                                <f:selectItem itemLabel="+4" itemValue="4" />
                                <f:selectItem itemLabel="+5" itemValue="5" />
                                <f:selectItem itemLabel="+6" itemValue="6" />
                                <f:selectItem itemLabel="+7" itemValue="7" />
                                <f:selectItem itemLabel="+8" itemValue="8" />
                                <f:selectItem itemLabel="+9" itemValue="9" />
                                <f:selectItem itemLabel="+10" itemValue="10" />
                                <f:selectItem itemLabel="+11" itemValue="11" />
                                <f:selectItem itemLabel="+12" itemValue="12" />
                            </p:selectOneMenu>
                        </p:column>
                    </p:row>
                    <p:row>
                        <p:column><h:outputLabel for="editDialogMessage" value="Message: *" /></p:column>  
                        <p:column colspan="3"><p:inputTextarea value="#{userViewData.feed.content}" id="editDialogMessage" rows="6" cols="50"/></p:column>
                    </p:row>
                    <p:row>
                        <p:column><h:outputLabel for="myWallRadio" value="Destination: " /></p:column>  
                        <p:column colspan="3">
                            <p:selectOneRadio id="myWallRadio" value="#{userViewData.feed.myWall}" layout="custom">
                                <f:selectItem itemLabel="My Wall" itemValue="true" />
                                <f:selectItem itemLabel="Friend`s Wall " itemValue="false" />
                                <p:ajax event="change" update="friendAutoCompleteParent"/>
                            </p:selectOneRadio>
                            <p:radioButton id="myWallRadioOptionMyWall" for="myWallRadio" itemIndex="0"/>
                            <h:outputLabel for="myWallRadioOptionMyWall" value="My Wall" />
                            <p:radioButton id="myWallRadioOptionFriendWall" for="myWallRadio" itemIndex="1"/>
                            <h:outputLabel for="myWallRadioOptionFriendWall" value="Friend`s Wall " />
                            <p:outputPanel id="friendAutoCompleteParent">
                                <p:autoComplete id="friendAutoComplete" minQueryLength="3" value="#{userViewData.feed.friend}" effect="fade" completeMethod="#{feedsOverview.completeFriend}" 
                                                rendered="#{not userViewData.feed.myWall}" var="friend" forceSelection="true" itemLabel="#{friend.name}" itemValue="#{friend}" converter="friendConverter" style="border: 0px;" process="@this" scrollHeight="300">
                                    <p:column>
                                        <p:graphicImage value="#{friend.pic_square}" styleClass="picTable"/> #{friend.name}
                                    </p:column>
                                </p:autoComplete>
                            </p:outputPanel>
                        </p:column>
                    </p:row>
                    <p:row>
                        <p:column></p:column>
                        <p:column colspan="4">
                            <p:selectBooleanCheckbox value="#{userViewData.feed.sendNotification}" itemLabel="Send me an email after the message has been posted"/>
                        </p:column>
                    </p:row>
                    <f:facet name="footer">  
                        <p:row>
                            <p:column colspan="4">
                                <p:commandButton value="Save feed" icon="ui-icon-check" style="margin:0" actionListener="#{feedsOverview.saveFeed}" id="saveFeedButton" update="editDialogFeedback,feedsTableParent" process="editDialog" oncomplete="if(!args.validationFailed){editDlg.hide();}else{$('#feedsMainForm\\:editDialog').effect('shake', { times:3 }, 100);}"/>  
                            </p:column>
                        </p:row>
                    </f:facet>  
                </p:panelGrid> 
            </p:dialog>
        </h:form>
    </h:body>
</html>